<template>
    <div class="member">
        <!-- 登录弹窗 -->
        <div class="popup-login" ref="popup_login" id="popup-login" v-show="popupShow">
            <div class="hq-login">
                <div class="close" @click="closePopupLogin"></div>
                <h1 class="tc"><span>恒企会计</span>官方登录</h1>
                <form>
                    <input type="text" id="login-phone" v-model="phone" placeholder="请输入手机号码">
                    <input type="password" id="password" v-model="password" placeholder="设置密码：8-16位数字和字母" maxlength="16">
                    <!-- <div class="code-box">
                        <input type="text" class="input-code" id="login-code" placeholder="请输入短信验证码">
                        <input class="get-code white" type="button" id="codeInfo" onclick="codeFun('#login-phone', '#codeInfo')" value="获取验证码">
                    </div> -->
                    <div class="btn-login white" @click="login">立即登录/注册</div>
                    <div class="hint">提示</div>
                    <p class="hint-t">注册后即可成为恒企会员，享受免费会计学习福利</p>
                </form>
            </div>
        </div>

        <div class="user-box" id="login-default" v-show="loginDefault" @click="showPopupLogin">
            <div class="user-msg">
                <div class="user-pic" id="user-pic"><img class="w100" src="http://img.hengqijiaoyu.cn/assets/images/idx-m/WP1-hn/user.png" alt=""></div>
                <div class="user-p">
                    <div>
                        <span class="user-name" id="user-name">点击登录</span>
                        <span class="crown" id="crown"><img class="w100" src="http://img.hengqijiaoyu.cn/assets/images/idx-m/WP1-hn/crown.png" alt=""></span>
                    </div>
                    <p class="vip" id="vip">您尚未登录,登录享免费特权 </p>
                </div>
            </div>
            <ul>
                <li id="wallet"><img class="w100" src="http://img.hengqijiaoyu.cn/assets/images/idx-m/WP1-hn/wallet.png" alt=""></li>
                <li id="book"><img class="w100" src="http://img.hengqijiaoyu.cn/assets/images/idx-m/WP1-hn/book.png" alt=""></li>
                <li id="search"><img class="w100" src="http://img.hengqijiaoyu.cn/assets/images/idx-m/WP1-hn/search.png" alt=""></li>
            </ul>
        </div>
        <div class="user-box" id="login-act" v-show="loginAct" >
            <div class="user-msg">
                <div class="user-pic"><img class="w100" src="http://img.hengqijiaoyu.cn/assets/images/idx-m/WP1-hn/act-user.png" alt=""></div>
                <div class="user-p">
                    <div>
                        <span class="user-name" id="act-user">{{this.phone}}</span>
                        <span class="crown"><img class="w100" src="http://img.hengqijiaoyu.cn/assets/images/idx-m/WP1-hn/act-crown.png" alt=""></span>
                    </div>
                    <p class="vip">普通会员</p>
                </div>
            </div>
            <ul>
                <li><img class="w100" src="http://img.hengqijiaoyu.cn/assets/images/idx-m/WP1-hn/act-wallet.png" alt=""></li>
                <li><img class="w100" src="http://img.hengqijiaoyu.cn/assets/images/idx-m/WP1-hn/act-book.png" alt=""></li>
                <li><img class="w100" src="http://img.hengqijiaoyu.cn/assets/images/idx-m/WP1-hn/act-search.png" alt=""></li>
            </ul>
        </div>
        <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
            <li class="mui-table-view-cell">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-10">
                        <p class="mui-h6 mui-ellipsis">课程购买</p>
                    </div>
                    <div class="mui-table-cell mui-col-xs-2 mui-text-right">
                        <span class="mui-h5"> &gt; </span>
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-10">
                        <p class="mui-h6 mui-ellipsis">资料库</p>
                    </div>
                    <div class="mui-table-cell mui-col-xs-2 mui-text-right">
                        <span class="mui-h5"> &gt; </span>
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-10">
                        <p class="mui-h6 mui-ellipsis">我的笔记</p>
                    </div>
                    <div class="mui-table-cell mui-col-xs-2 mui-text-right">
                        <span class="mui-h5"> &gt; </span>
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-10">
                        <p class="mui-h6 mui-ellipsis">我的下载</p>
                    </div>
                    <div class="mui-table-cell mui-col-xs-2 mui-text-right">
                        <span class="mui-h5"> &gt; </span>
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-10">
                        <p class="mui-h6 mui-ellipsis">清除缓存</p>
                    </div>
                    <div class="mui-table-cell mui-col-xs-2 mui-text-right">
                        <span class="mui-h5"> &gt; </span>
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-10">
                        <p class="mui-h6 mui-ellipsis">新版吐槽</p>
                    </div>
                    <div class="mui-table-cell mui-col-xs-2 mui-text-right">
                        <span class="mui-h5"> &gt; </span>
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-10">
                        <p class="mui-h6 mui-ellipsis">关于恒企会计</p>
                    </div>
                    <div class="mui-table-cell mui-col-xs-2 mui-text-right">
                        <span class="mui-h5"> &gt; </span>
                    </div>
                </div>
            </li>
         </ul>
        <mt-button v-show="loginAct" type="danger" size="large" @click="logout">退出登录</mt-button>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                phone:'',
                password:'',
                popupShow:false,//设置弹窗默认为隐藏
                loginDefault:true,//设置用户未登录框时 登录框 为显示状态
                loginAct:false//设置用户未登录框时 登录框 为隐藏状态
            }
        },
        created(){
            localStorage.getItem('userMsg');
            var userMsg = JSON.parse(localStorage.getItem('userMsg'));
            if(userMsg==""||userMsg==null){
                return false
            }else {
                console.log(userMsg)
                this.phone = userMsg.newPhone;
                this.password = userMsg.newPassword;
                this.loginAct = userMsg.newLoginAct;
                this.loginDefault = userMsg.newLoginDefault
            }


        },
        methods: {
            //点击显示登录框
            showPopupLogin(){
                this.popupShow = true;
            },
            //点击关闭登录框
            closePopupLogin(){
                this.popupShow = false;
            },
            //登录
            login(){
                var re = /^1[3,5,8,9,4,6,7]\d{9}$/;
                var pwRegex = /[0-9A-Za-z]{8,16}$/;//8到16位数字密码

                if (this.phone == '' || this.phone == null) {    /*判断是否正确输入手机号*/
                    alert('请输入手机号');
                    return false;
                } else if (!re.test(this.phone)) {
                    alert('请输入正确格式手机号');
                    return false;
                }
                /*判断是否输入验证码*/
                if(this.password == '' || this.password == null){
                    alert('请输入密码！');
                    return false;
                } else if(!pwRegex.test(this.password)){
                    alert('请输入正确格式密码！');
                    return false;
                }

                this.loginAct = true;
                this.popupShow = false;
                this.loginDefault = false;

                /*将电话号码存储到本地的localStorage 中*/
                localStorage.setItem('userMsg',JSON.stringify(
                    {
                        newPhone:this.phone,
                        newPassword:this.password,
                        newLoginAct:this.loginAct,
                        newLoginDefault:this.loginDefault
                    }
                    ));
            },

            //退出登录
            logout(){
                this.loginAct = false;
                this.loginDefault = true;
                localStorage.setItem('userMsg',JSON.stringify(
                    {
                        newPhone:this.phone,
                        newPassword:this.password,
                        newLoginAct:this.loginAct,
                        newLoginDefault:this.loginDefault
                    }
                ));
            }
        },
        computed: {},
        components: {}
    }
</script>
<style lang="scss" scoped>
.w100{
    width: 100%;
}
ul,li{
    list-style: none;
}
.member{
    padding: 10px;

}
.mint-button{
    margin-top: 40px;
}
.user-box{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #CCCCCC;
}
.user-box .user-msg{
    display: flex;
    justify-content: center;
    align-items: center;
}
.user-box .user-msg .user-pic{
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
.user-box .user-msg .user-p div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.user-box .user-msg .user-p div .user-name{
    display: block;
    font-size: 14px;
}
.user-box .user-msg .user-p div .crown{
    display: block;
    width: 16px;
    height: 13px;
    font-size: 0;
    margin-left: 15px;
}
.user-box .user-msg .user-p .vip{
    font-size: 12px;
    color: #999999;
}
.user-box ul{
    display: flex;
    justify-content: space-around;
    padding-left: 0;
}
.user-box ul li{
    width: 14px;
    height: 17px;
    margin-left: 2px;
    font-size: 0;
}

.tab-class ul{
    width: 680px;
    margin: 40px auto 0 auto;
    display: flex;
    justify-content: space-between;
}
.tab-class ul li{
    width: 150px;
    padding: 10px 0;
}
.tab-class ul div{
    width: 70px;
    height: 67px;
    font-size: 0;
    margin: 0 auto;
}
.tab-class ul li p{
    font-size: 12px;
    text-align: center;
    margin-top: 15px;
}
.tab-class ul li.li-act{
    background: rgba(15,186,79, 0.2);
    border-radius: 8px;
}


/*登录框*/
.popup-login{
    /*display: none;*/
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    top:0;
    left: 0;
    z-index: 19;
}
.popup-login .hq-login{
    width: 320px;
    margin: 0 auto;
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 5px;
    padding-top: 35px;
    padding-bottom: 20px;
}
.popup-login .hq-login h1{
    width: 280px;
    margin: 0 auto;
    font-size: 24px;
    position: relative;
    padding-bottom: 15px;
}
.popup-login .hq-login h1::before{
    width: 100%;
    height: 1px;
    bottom: 0;
}
.popup-login .hq-login h1::after{
    width: 125px;
    height: 3px;
    bottom: -1px;
}
.popup-login .hq-login h1::before,
.popup-login .hq-login h1::after{
    content: '';
    position: absolute;
    background: #0FBA4F;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.popup-login .hq-login h1 span{
    font-size: 30px;
    color: #0FBA4F;
}
.popup-login .hq-login form{
    width: 280px;
    margin: 30px auto 0 auto;
}
.popup-login .hq-login form>input,
.popup-login .hq-login form>div{
    width: 100%;
    margin-bottom: 12px;
}
.popup-login .hq-login form input{
    display: block;
    border-radius: 5px;
    font-size: 12px;
    height: 40px;
    line-height: 40px;
    outline: none;
}
.popup-login .hq-login form .code-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.popup-login .hq-login form>input,
.popup-login .hq-login form>.code-box .input-code{
    background: #ffffff;
    padding-left: 15px;
    border: 1px solid #E2E2E2;
    box-sizing: border-box;
}
.popup-login .hq-login form .code-box .input-code{
    width: 170px;
}
.popup-login .hq-login form .code-box .get-code{
    width: 100px;
    background: #0FBA4F;
    text-align: center;
    border: none;
}
.popup-login .hq-login form .btn-login{
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: linear-gradient(to bottom, #FF9043 0 , #F85149 100%);
    border-radius: 5px;
    font-size: 15px;
}
.popup-login .hq-login form .hint{
    font-size: 20px;
    text-align: center;
    color: #999999;
    position: relative;
}
.popup-login .hq-login form .hint::before,
.popup-login .hq-login form .hint::after{
    content: '';
    width: 115px;
    height: 1px;
    background: #E6E6E6;
    position: absolute;
    top: 50%;
}
.popup-login .hq-login form .hint::before{
    left: 0;
}
.popup-login .hq-login form .hint::after{
    right: 0;
}
.popup-login .hq-login form .hint-t{
    font-size: 12px;
    text-align: center;
    color: #999999;
}
.popup-login .hq-login .close{
    width: 22px;
    height: 22px;
    background: url('http://img.hengqijiaoyu.cn/assets/images/idx-m/WP1-hn/close-g.png') no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 29;
}
.mui-ios .mui-table-view-cell{
    border-bottom: 1px solid #c8c7cc;
}

.mui-table-view-cell:after{
    background:none;
}
</style>